<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/search.css">
    <script src="../js/cookie.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .w {
            width: 1200px;
            margin: 0 auto;
        }

        .nav {
            width: 1200px;
            margin: 0 auto;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .tips a {
            font-size: 14px;
        }

        .wrapTable table {
            width: 100%;
            line-height: 45px;
            border-collapse: collapse;
            text-align: center;
            table-layout: fixed;
        }

        .wrapTable table,
        .wrapTable th,
        .wrapTable td {
            border: 1px solid #000;
        }
    </style>
</head>

<body>
    <div class="nav w">
        <div class="tips">
            <a href="./login.html">你好,请登录</a>
            <a href="./register.html">用户注册</a>
        </div>
    </div>

    <div class="wrapTable w">
        <table>
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>班级</th>
                    <th>语文</th>
                    <th>数学</th>
                    <th>英语</th>
                    <th>总分</th>
                    <th>编辑</th>
                    <th>删除</th>
                </tr>
            </thead>
            <tbody>
                <!-- <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>2103</td>
                    <td>55</td>
                    <td>66</td>
                    <td>77</td>
                    <td>198</td>
                    <td><a href="javascript:;" class="edit">编辑</a></td>
                    <td><a href="javascript:;" class="del">删除</a></td>
                </tr> -->
            </tbody>
        </table>
    </div>

    <div class="shadow">
        <form class="detail" action="" autocomplete="off" onsubmit="return false">
            <p><label>编号:<input type="text" name="id" disabled></label></p>
            <p><label>姓名:<input type="text" name="name" disabled></label></p>
            <p><label>班级:<input type="text" name="class" disabled></label></p>
            <p><label>语文:<input type="text" name="chinese"></label></p>
            <p><label>数学:<input type="text" name="math"></label></p>
            <p><label>英语:<input type="text" name="english"></label></p>
            <p>
                <button class="subBtn">确定</button>
                <input class="canBtn" type="reset" value="取消">
            </p>
        </form>
    </div>

</body>
<script>
    var tips = document.getElementsByClassName("tips")[0];
    var tbody = document.querySelector(".wrapTable tbody");
    var shadow = document.querySelector(".shadow");

    var form = document.querySelector(".shadow form");
    var idInp = document.getElementsByName("id")[0];  // form.id
    var nameInp = document.getElementsByName("name")[0];
    var classInp = document.getElementsByName("class")[0];
    var chineseInp = document.getElementsByName("chinese")[0];
    var mathInp = document.getElementsByName("math")[0];
    var englishInp = document.getElementsByName("english")[0];

    var subBtn = document.querySelector(".subBtn");
    var canBtn = document.querySelector(".canBtn");

    // 标识用户身份  如果用户已登录 => 显示 欢迎,xxx
    if (getCookie("lgc")) {
        tips.innerHTML = "欢迎您," + getCookie("lgc") + "<button onclick='exit()'>退出</button>";
        // var btn = tips.querySelector("button");
    }

    var xhr = new XMLHttpRequest();

    xhr.open("get", "../php/searchAllGrade.php", true);

    xhr.send();

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var result = JSON.parse(xhr.responseText);
            console.log(result);
            var { status, detail, list } = result;

            if (status) {
                var html = "";
                list.forEach(({ id, name, class: _class, chinese, math, english, total }) => {
                    html += `<tr data-id="${id}">
                    <td>${id}</td>
                    <td>${name}</td>
                    <td>${_class}</td>
                    <td>${chinese}</td>
                    <td>${math}</td>
                    <td>${english}</td>
                    <td>${total}</td>
                    <td><a href="javascript:;" class="edit">编辑</a></td>
                    <td><a href="javascript:;" class="del">删除</a></td>
                </tr>`
                })
                tbody.innerHTML = html;
            } else {
                tbody.innerHTML = `<tr><td colspan="9">暂无数据</td></tr>`;
            }

            // ajax绑定事件
            // (1) 生成之后获取元素绑定事件
            // (2) 事件委托

        }
    }

    tbody.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.className == "del") {
            console.log(target);

            // DOM删除
            // tr.remove();
            if (confirm("是否删除该成绩")) {
                var tr = target.parentElement.parentElement;
                var id = tr.getAttribute("data-id");
                console.log(id);

                // 根据id删除
                var xhr = new XMLHttpRequest();

                xhr.open("get", "../php/deleteGradeById.php?id=" + id, true);

                xhr.send();

                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        var result = JSON.parse(xhr.responseText);
                        console.log(result);
                        var { status, detail } = result;
                        if (status) {
                            tr.remove();
                        } else {
                            alert(detail);
                        }

                    }
                }
            }
        } else if (target.className == "edit") {
            shadow.style.display = "block";

            // 点击编辑 根据id找到数据 渲染到form
            var tr = target.parentElement.parentElement;
            var id = tr.getAttribute("data-id");
            console.log(id);

            // 根据id找到数据
            var xhr = new XMLHttpRequest();

            xhr.open("get", "../php/searchGradeById.php?id=" + id, true);

            xhr.send();

            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    var result = JSON.parse(xhr.responseText);
                    console.log(result);
                    var { status, detail, data } = result;
                    if (status) {
                        idInp.value = data.id;
                        nameInp.value = data.name;
                        classInp.value = data.class;
                        chineseInp.value = data.chinese;
                        mathInp.value = data.math;
                        englishInp.value = data.english;
                    } else {
                        alert(detail);
                    }


                }
            }


        }
    }

    subBtn.onclick = function () {
        // 编辑之后 点击确定按钮  => 保存到数据库
        var id = idInp.value;
        var chinese = chineseInp.value;
        var math = mathInp.value;
        var english = englishInp.value;

        var xhr = new XMLHttpRequest();

        xhr.open("post", "../php/updateGradeById.php", true);

        xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhr.send(`id=${id}&chinese=${chinese}&math=${math}&english=${english}`);

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var result = JSON.parse(xhr.responseText);
                console.log(result);
                var { status, detail } = result;
                if (status) {
                    shadow.style.display = "none";
                    location.reload();
                } else {
                    alert(detail);
                }
            }
        }



    }


    canBtn.onclick = function () {
        shadow.style.display = "none";
        // idInp.value = "";
    }



















    function exit() {
        delCookie("lgc");
        location.reload();
    }
</script>

</html>